<template>
	<view class="page">
		<view class="top">
			<view class="user-info">
				<block v-if="vuex_token">
					<u-avatar class="avatar" size="large" :src="vuex_user.avatar"></u-avatar>
					<view class="nickname">{{vuex_user.nickname}}
						<!-- #ifdef MP-WEIXIN -->
						<text class="kee-font-sync u-m-l-10" @click="openPop('updateProfilePop')"></text>
						<!-- #endif -->
					</view>
				</block>
				<block v-else>
					<u-avatar class="avatar" size="large"></u-avatar>
					<view @click="navTo('/pages/user/login')" class="nickname">登录</view>
				</block>
			</view>
		</view>
		<view class="u-padding-50">

			<view @click="navTo('/pages/user/report/list')" class="cl-cell">
				<view class="cl-cell__icon">
					<image src="../../static/report.png"></image>
				</view>
				<view class="cl-cell__title">我的上报</view>
				<view class="cl-cell__right">
					<image src="../../static/link-right.png"></image>
				</view>
			</view>
			<view v-if="vuex_config['scoreshop_open'] === '1'" @click="navTo('/pages/scoreshop/good/index')"
				class="cl-cell">
				<view class="cl-cell__icon">
					<image src="../../static/score.png"></image>
				</view>
				<view class="cl-cell__title">积分商城</view>
				<view class="cl-cell__right">
					<image src="../../static/link-right.png"></image>
				</view>
			</view>
			<view class="u-flex u-row-between">
				<view @click="navTo('/pages/user/about')" class="cl-cell">
					<view class="cl-cell__icon">
						<image src="../../static/about.png"></image>
					</view>
					<view class="cl-cell__title">关于我们</view>
				</view>
				<view class="cl-cell" @click="call">
					<view class="cl-cell__icon">
						<image src="../../static/kefu.png"></image>
					</view>
					<view class="cl-cell__title">在线客服</view>
				</view>
			</view>
			<view v-if="vuex_token" @click="logout" class="cl-cell">
				<view class="cl-cell__icon">
					<image src="../../static/logout.png"></image>
				</view>
				<view class="cl-cell__title">退出登录</view>
				<view class="cl-cell__right">
					<image src="../../static/link-right.png"></image>
				</view>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->


		<u-popup v-model="updateProfilePop" mode="center" border-radius="10" width="80%">
			<view class="pop">
				<view class="pop__title">基本信息</view>
				<view class="pop__bd">
					<view class="cell-group u-p-b-30">
						<button class="cell link" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
							<view class="title">头像</view>
							<view class="value">
								<u-avatar size="60" :src="vuex_user.avatar"></u-avatar>
							</view>
						</button>
						<view class="cell link" @click="openPop('updateNicknamePop')">
							<view class="title">昵称</view>
							<view class="value">{{ vuex_user.nickname }}</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="updateNicknamePop" mode="center" border-radius="10" width="80%">
			<view class="pop">
				<view class="pop__title">修改昵称</view>
				<view class="pop__bd">
					<view class="u-p-40">
						<view class="u-m-b-30">
							<input class="nicknameInput" type="nickname" v-model="nickname" @blur="changeNickname" placeholder="请输入新的昵称" />
						</view>
						<u-button type="success" @click="submitNicknameForm">确认修改</u-button>
					</view>

				</view>
			</view>
		</u-popup>
		<!-- #endif -->
	</view>
</template>
<script>
	const app = getApp();
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['vuex_token', 'isLogin', 'vuex_user']),
		data() {
			return {
				updateProfilePop: false,
				updateNicknamePop: false,
				nickname: ''
			}
		},
		methods: {
			getUserInfoData: async function() {
				let res = await this.$u.api.getUserInfo();
				uni.stopPullDownRefresh();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				this.$u.vuex('vuex_user', res.data.userInfo || {});
			},
			call: function() {
				uni.makePhoneCall({
					phoneNumber: this.vuex_config.phone
				});
			},
			logout: async function() {
				let res = await this.$u.api.logout();
				this.$u.toast(res.msg);
				if (!res.code) {
					return;
				}
				this.$u.vuex('vuex_user', {}); //清除vuex_user
				this.$u.vuex('vuex_token', ''); //清除用户token
			},
			openPop(field) {
				console.log(this[field])
				this[field] = true;

			},
			closePop(field) {
				this[field] = false;
			},
			changeNickname(e){
				this.nickname = e.detail.value;
			},
			uploadAvatar: function(e) {
				let that = this;
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						//上传文件
						that.$u.api.upload({
							filePath: tempFilePaths[0]
						}).then(res => {
							console.log(res)
							//更新头像
							that.$u.api.updateAvatar({
								avatar: res.data.url
							}).then(res1 => {
								that.$u.vuex('vuex_user', res1.data)
							});
						});
					}
				});
			},
			chooseAvatar: function(e) {
				let that = this;
				//上传文件
				that.$u.api.upload({
					filePath: e.detail.avatarUrl
				}).then(res => {
					that.$u.api.updateAvatar({
						avatar: res.data.url
					}).then(res1 => {
						that.$u.vuex('vuex_user', res1.data)
					})
				});
			},
			submitNicknameForm: async function() {
				console.log(this.nickname)
				if (this.nickname.length < 1) {
					uni.showToast({
						title: '请输入新昵称',
						icon: 'none'
					})
					return;
				}
				let res = await this.$u.api.updateProfile({
					nickname: this.nickname
				});
				this.$u.toast(res.msg);
				if (res.code) {
					this.$u.vuex('vuex_user', res.data);
					this.updateNicknamePop = false;
				}
			}
		},
		onLoad() {
			this.nickname = this.vuex_user.nickname || '';
		},
		onShow() {
			if (this.vuex_token) {
				this.getUserInfoData();
			} else {
				this.$u.vuex('vuex_user', {});
			}
		}

	}
</script>
<style lang="scss">
	page {
		color: #020202;
		font-size: 32rpx;
		font-weight: 600;
	}

	.top {
		padding-top: 50rpx;
		padding-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.user-info {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.user-info .nickname,
	.user-info .avatar {
		margin: 0 auto;
	}

	.user-info .nickname {
		text-align: center;
		margin-top: 20rpx;
	}

	.cl-cell {
		margin-bottom: 50rpx;
	}

	@font-face {
		font-family: 'keefont';
		src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	[class^=kee-font-],
	[class*=" kee-font-"] {
		font-family: "keefont" !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.kee-font-sync:before {
		content: "\e60c";
	}

	.cell-group .cell:last-child::after {
		display: none;
	}

	.cell {
		position: relative;
		display: flex;
		align-items: center;
		padding: 13px 16px;
		background-color: #fff;
		font-size: 16px;
		color: #333;
		margin: 0;
		line-height: 1;

		.title {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}

		.value {
			flex: 2;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 28rpx;
			color: #999;
		}

		&.link {
			padding-right: calc(30rpx + 16px);

			&:active {
				background: #f7f7f9 !important;
			}

			&::before {
				content: "";
				height: 11px;
				width: 11px;
				border-width: 2px 2px 0 0;
				border-color: #b2b2b2;
				border-style: solid;
				-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
				transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
				position: absolute;
				top: 50%;
				margin-top: -7px;
				right: 30rpx
			}
		}

		&::after {
			content: '';
			width: calc(100% - 60rpx);
			height: 1rpx;
			background-color: #eaeef1;
			position: absolute;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			bottom: 0;
			top: auto !important;
			left: 30rpx;
		}
	}

	button.cell::after {
		border: none;
	}

	.pop {
		display: flex;
		flex-direction: column;

		.pop__title {
			padding: 30rpx;
			text-align: center;
		}
	}

	.nicknameInput {
		display: block;
		font-weight: normal;
		font-size: 14px;
		color: #999999;
		padding: 10px 16px;
		border: 1rpx solid #eee;
		border-radius: 5px;
	}
</style>
